<template>
	<view class="content">
		<view class="input-box">
			<view class="head-tit">手机号验证</view>
			<view class="input1-box">
				<input class="inp-name" focus v-model="mobile" maxlength="11" placeholder="请输入手机号" placeholder-style="color: #999;"/>
				<text v-if="mobile == ''"></text>
				<uni-icons v-else class="icons1" @click="mobile = ''" type="closeempty" size="18" color="#f18b49"></uni-icons>
			</view>
			<view class="login-btn" @click="login()">获取验证码</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				mobile: '',
			}
		},
		onShow() {
			this.mobile = uni.getStorageSync('mobile')
		},
		methods: {
			uniShowToast(tit,time){
				uni.showToast({
					title: tit,
					duration: time,
					icon: 'none'
				})
			},
			login(){
				let mobReg = /^[1][3,4,5,7,8,9][0-9]{9}$/
				if(this.mobile == ''){
					this.uniShowToast('请填写你的手机号', 1200)
				} else if(this.mobile.length < 11){
					this.uniShowToast('请输入11位格式的手机号', 1500)
				} else if(mobReg.test(this.mobile)){
					this.$getHttp('/gjcApi/getsms?mobile=' + this.mobile, {}, res => {
						if(res.code == 411){
							uni.showModal({
								title: '注册',
								cancelText: '暂不注册',
								confirmText: '前去注册',
								confirmColor: '#f18b49',
								content: '该手机号未注册，是否前去注册？',
								success: (res) => {
									if (res.confirm) {
										uni.navigateTo({
											url: '/pages/login/register'
										})
									}
								}
							})
						} else {
							uni.navigateTo({
								url: '/pages/login/code?mobile=' + this.mobile + '&code=' + res.code
							})
						}
					})
				} else if(this.mobile.length == 11){
					this.uniShowToast('手机号码不正确', 1200)
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background: $uni-model-color;
	}
	.content{
		padding: 60rpx;
		.input-box{
			.head-tit{
				font-size: 44rpx;
				margin-bottom: 30rpx;
				letter-spacing: 4rpx;
				color: $uni-text-color;
			}
			input{
				padding: 20rpx 0;
				border-bottom: 2rpx solid $uni-text-color;
			}
			.input1-box{
				position: relative;
				.inp-name{
					margin-bottom: 5rpx;
					padding-left: 4rpx;
					letter-spacing: 2rpx;
				}
				.icons1{
					position: absolute;
					bottom: 20rpx;
					right: 15rpx;
				}
			}
			.login-btn{
				margin-top: 40rpx;
				padding: 20rpx 0;
				text-align: center;
				background: #ff914d;
				border-radius: 10rpx;
				letter-spacing: 20rpx;
				color: $uni-model-color;
			}
		}
	}
</style>